<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bilibili 动态</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <style>
    .dynamic-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .dynamic-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .dynamic-filter {
      display: flex;
      gap: 10px;
    }

    .filter-btn {
      padding: 6px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .filter-btn:hover {
      background-color: #f5f5f5;
      border-color: #d0d0d0;
    }

    .filter-btn.active {
      background-color: #fb7299;
      color: white;
      border-color: #fb7299;
    }

    .dynamic-list {
      list-style: none;
      padding: 0;
    }

    .dynamic-item {
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 20px;
      display: flex;
      gap: 16px;
    }

    .up-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }

    .dynamic-content {
      flex: 1;
    }

    .up-info {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .up-name {
      font-weight: 600;
      color: #1a1a1a;
    }

    .dynamic-time {
      color: #666;
      font-size: 0.9em;
    }

    .dynamic-text {
      margin-bottom: 12px;
      line-height: 1.6;
    }

    .dynamic-media {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .media-thumbnail {
      width: 120px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .media-thumbnail:hover {
      transform: scale(1.03);
    }

    .dynamic-actions {
      margin-top: 16px;
      display: flex;
      gap: 12px;
      font-size: 0.9em;
      color: #666;
    }

    .action-icon {
      margin-right: 4px;
    }
  </style>
</head>

<body>

  <header class="sticky top-0 z-50 bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">

      <div class="flex items-center">
        <a href="work-html.html" class="text-gray-600 hover:text-primary mr-3 transition-custom">
          <i class="fa fa-home text-xl"></i>
        </a>

        <a href="#" class="flex items-center space-x-2">
          <img src="https://picsum.photos/40/40" alt="Bilibili Logo" class="h-10 w-10 rounded-full">
          <span class="text-xl font-bold text-primary">Bilibili</span>
        </a>
      </div>

      <!-- 动态页面导航 -->
      <nav class="flex items-center">
        <a href="rank.html" class="nav-link text-gray-700 hover:text-primary transition-custom mr-4">排行榜</a>
        <a href="#" class="nav-link text-primary font-medium">动态</a>
      </nav>

      <!-- 用户区域 -->
      <div class="flex items-center space-x-4">
        <button class="text-gray-600 hover:text-primary transition-custom">
          <i class="fa fa-search text-xl"></i>
        </button>
        <button class="text-gray-600 hover:text-primary transition-custom">
          <i class="fa fa-bell text-xl"></i>
        </button>
        <img src="https://picsum.photos/32/32" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
      </div>
    </div>
  </header>

  <!-- 动态页面主体 -->
  <main class="dynamic-container">
    <div class="dynamic-header">
      <h1 class="text-2xl font-bold text-gray-800">我的动态</h1>
      <div class="dynamic-filter">
        <button class="filter-btn active">全部</button>
        <button class="filter-btn">视频</button>
        <button class="filter-btn">图文</button>
        <button class="filter-btn">直播</button>
      </div>
    </div>

    <ul class="dynamic-list">
      <!-- 动态条目1 -->
      <li class="dynamic-item">
        <img src="https://picsum.photos/50/50?random=1" alt="UP主头像" class="up-avatar">
        <div class="dynamic-content">
          <div class="up-info">
            <span class="up-name">游戏君</span>
            <span class="dynamic-time">1小时前</span>
          </div>
          <p class="dynamic-text">新一期游戏攻略上线！教你如何无伤通关 boss~</p>
          <div class="dynamic-media">
            <img src="https://picsum.photos/120/80?random=101" alt="视频缩略图" class="media-thumbnail">
            <img src="https://picsum.photos/120/80?random=102" alt="视频缩略图" class="media-thumbnail">
            <img src="https://picsum.photos/120/80?random=103" alt="视频缩略图" class="media-thumbnail">
          </div>
          <div class="dynamic-actions">
            <span><i class="fa fa-thumbs-o-up action-icon"></i> 点赞 1.2万</span>
            <span><i class="fa fa-comment-o action-icon"></i> 评论 567</span>
            <span><i class="fa fa-share action-icon"></i> 分享 321</span>
          </div>
        </div>
      </li>

      <!-- 动态条目2 -->
      <li class="dynamic-item">
        <img src="https://picsum.photos/50/50?random=2" alt="UP主头像" class="up-avatar">
        <div class="dynamic-content">
          <div class="up-info">
            <span class="up-name">美食小当家</span>
            <span class="dynamic-time">3小时前</span>
          </div>
          <p class="dynamic-text">周末尝试做了日式咖喱饭，附详细菜谱~</p>
          <img src="https://picsum.photos/300/180?random=201" alt="图文缩略图" class="media-thumbnail"
            style="width: 200px; height: 120px;">
          <div class="dynamic-actions">
            <span><i class="fa fa-thumbs-o-up action-icon"></i> 点赞 8900</span>
            <span><i class="fa fa-comment-o action-icon"></i> 评论 456</span>
            <span><i class="fa fa-share action-icon"></i> 分享 210</span>
          </div>
        </div>
      </li>

      <!-- 动态条目3 -->
      <li class="dynamic-item">
        <img src="https://picsum.photos/50/50?random=3" alt="UP主头像" class="up-avatar">
        <div class="dynamic-content">
          <div class="up-info">
            <span class="up-name">数码评测菌</span>
            <span class="dynamic-time">昨天</span>
          </div>
          <p class="dynamic-text">实测！2025年最值得买的千元手机横评...</p>
          <div class="dynamic-media">
            <img src="https://picsum.photos/120/80?random=301" alt="视频缩略图" class="media-thumbnail">
            <img src="https://picsum.photos/120/80?random=302" alt="视频缩略图" class="media-thumbnail">
          </div>
          <div class="dynamic-actions">
            <span><i class="fa fa-thumbs-o-up action-icon"></i> 点赞 2.1万</span>
            <span><i class="fa fa-comment-o action-icon"></i> 评论 1.2万</span>
            <span><i class="fa fa-share action-icon"></i> 分享 890</span>
          </div>
        </div>
      </li>
    </ul>
  </main>


  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-lg font-bold mb-4">关于我们</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">公司介绍</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">联系方式</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">加入我们</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">帮助中心</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">常见问题</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">用户反馈</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">安全中心</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">平台协议</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-primary transition-custom">用户协议</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">隐私政策</a></li>
            <li><a href="#" class="hover:text-primary transition-custom">版权保护</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-primary transition-custom">
              <i class="fa fa-instagram text-xl"></i>
            </a>
          </div>
          <p class="mt-4 text-sm text-gray-400">
            扫描二维码，下载 Bilibili 客户端
          </p>
          <div class="mt-2 bg-white p-2 inline-block rounded">
            <img src="https://picsum.photos/80/80" alt="二维码" class="w-20 h-20">
          </div>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400">
        <p>© 2025 Bilibili. All rights reserved.</p>
      </div>
    </div>
  </footer>
</body>

</html>